<template>
    <div class="app-container" v-if="!showForm">
      <div class="query-wrapper" model="queryParams" style="margin-bottom: 10px;">
          <el-select v-model="queryParams.vesselName" filterable clearable allow-create placeholder="Vessel" style="width:180px"
        @change="selectVessel(queryParams)">
        <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName" v-for="item in vessels">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.voyageNo" allow-create filterable clearable placeholder="Voyage" style="width:100px"
        @change="selectVoyage(queryParams)" >
        <el-option :key="item.voyageNo" :label="item.voyageNo" :value="item.voyageNo" v-for="item in voyages">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.pol" filterable clearable allow-create placeholder="POL" >
        <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pols">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.pod" filterable clearable allow-create placeholder="POD" >
        <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pods">
        </el-option>
      </el-select> 
      &nbsp;&nbsp;
        <el-input  v-model="queryParams.blNo" placeholder=" B/L No" style="width:200px"></el-input>
        &nbsp;&nbsp; 
         <el-button type="primary" icon="search" @click="search">{{ $t("ship.button.search") }}</el-button>
         <SearchReset :query-params="queryParams" @reset="resetQuery"></SearchReset>
        </div>
  
      <el-table stripe  ref="tableRef" :data="listData" style="width: 100%;" :cell-style="{textAlign:'center'}">
        <el-table-column prop="blNo" label="B/L No." width="150" />
        <el-table-column prop="vesselName" label="Vessel" width="150"  />
        <el-table-column prop="voyageNo" label="Voyage"  width="100" /> 
        <el-table-column prop="pol" label="POL"  width="150" />
        <el-table-column prop="pod" label="POD"  width="150" show-overflow-tooltip/>
        <el-table-column prop="shipper" label="Shipper"  minWidth="150"  show-overflow-tooltip/> 
        <el-table-column prop="shipper" label="Consignee"  minWidth="150"  show-overflow-tooltip/>  
        <el-table-column prop="notifyParty" label="Notify Party"  minWidth="100"  show-overflow-tooltip/>  
      </el-table>
  
      <pagination
        v-show="total > 0"
        :total="total"
        :page="queryParams.pageNum"
        :limit="queryParams.pageSize"
        @pagination="pageQuery"
        style="float: right" />
    </div>
  </template>
  <script lang="ts" setup name="blList">
  import { ref, onMounted, reactive, computed } from "vue";
  import { useTableDrag } from '@/hooks/useHooks'
  import {ElMessage} from 'element-plus'
  import { convertDate } from "@/utils/date";
  import service from "@/utils/request"; 
  const route = useRoute(); 
  const { tableRef } = useTableDrag();
  let vessels = reactive([])
  let voyages = reactive([])
  let pods = reactive([])
  let pols = reactive([])
  const initForm = {
    id: null,
    blNo: null,
    blType: null, 
    orignalBlNo:null,
    url: null,
    localVessel:null,
    localFrom:null,
    notifyParty:null,
    consignee:null,
    invoiceDate: null,
    shipper: null,
    flag: null,
    fixtureNo: null,
    freightDate: convertDate(new Date()),
    salesId: null,
    clientName: null,
    mobile: null,
    receiver: null,
    contact: null,
    vesselName: null,
    voyageNo: null,
    sailedOn: null,
    issueDate:null,
    transhipment:null,
    totalWeight: null,
    totalVolume: null,
    goodsDesc: null,
    totalUnits: null,
    marks: null,
    pol: null,
    pod: null,
    bookingNo: null,
    originalBlNo: null,
    units: null,
    destination: null,
    freightPrepaid: null,
    freightPayable: null,
    arrangeDateAt: null,
    arrangeDate: null,
    arrangeBy: null
  };
  
  let showForm = route.query?.showForm;
  const formParam = reactive(Object.assign({}, initForm));
  
  const total = ref(0);

  const queryParams = reactive({
    pageNum: 1,
    pageSize: 20,
    vesselName: null,
    voyageNo:null,
    blNo: null,
    blType: null,
    orderByColumn: undefined,
    isAsc: undefined
  });   
   
  const listData = ref([]);
  const refreshTable = async () => { 
    let result = await service.get("/shipping/billOfLading/getTable", { params: queryParams });
    if (result) {
      listData.value = result.data;
      total.value = result.total;
    }   
  };
  const selectVessel = value => {
    voyages = (vessels.find(item => item.vesselName == value.vesselName) || { schedules: [] }).schedules; 
  };
  const selectVoyage = async (form) => {
    //@ts-ignore
    let item = voyages.find(n => n.voyageNo == form.voyageNo)
    if (item) {
      pods = item.pods
      pols = item.pols
    }
  }
  const portPod = ref("");
  const portPol = ref("");
   
  
  let isAdd = false;
   
  
  const pageQuery = async e => {
    queryParams.pageNum = e.page;
    queryParams.pageSize = e.limit;
    refreshTable();
  };
  const resetQuery = (data) => {
    Object.assign(queryParams, data)
    listData.value = []
    total.value = 0
  }
  const search = () => { 
    refreshTable();
  };
   
   
  onMounted(async () => {    
    let result = await service.get("/shipping/schedule/getAllSchedule");
    if (result) {
      vessels = result.data;
    }
  
  });
  </script>
  
  <style lang="scss" scoped>
  .add-container {
    padding: 30px;
    background-color: #fafafa;
    height: 100%;
  }
  .title {
    padding: 10px 10px 10px 0;
  }
  .dialog-footer {
    margin: 60px auto 0;
    width: 100%;
    text-align: center;
  } 
  </style>
   